<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文章</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/skins/default.css}">


</head>
<body>
<!--顶部导航栏-->
<div th:replace="Currency/indexnav::indexnav(2)"></div>
<div class="container" style="background-color: #fff" >
    <div class="row ">
        <div class="col-md-3">
            <span style="font-size: 20px">美文|</span> 记录-美好-生活 </div>
    </div>
</div>
<hr>
<!-- Blog body start -->
<div class="blog-body content-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-12">
                <!-- Blog 1 start -->
                <div class="blog-1" th:each="articleList:${articleList}">
                    <div class="blog-photo">
                        <img th:src="${articleList.photo}" alt="big-blog" class="img-fluid">
                        <div class="date-box">
                            <span th:text="${#dates.format(articleList.createtime,'dd')}">14</span>
                            <span th:text="${#dates.format(articleList.createtime,'MM')}">Nov</span>
                        </div>
                    </div>
                    <div class="detail">
                        <h3>
                            <a th:href="@{'/article/'+${articleList.id}}" th:text="${articleList.title}">Selling Your Real House</a>
                        </h3>
                        <div class="post-meta">
                            <span><a href="#"><i class="glyphicon glyphicon-user"></i><span th:text="${articleList.admin.adminname}">Amdin</span></a></span>
                            <span><a href="#"><i class="glyphicon glyphicon-eye-open"></i><span th:text="${articleList.visitcount}">23</span></a></span>
                            <span><a href="#"><i class="glyphicon glyphicon-heart"></i><span th:text="${articleList.likecount}">15</span></a></span>
                        </div>
                        <p th:text="${articleList.subtitle}">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.But also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with  into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with</p>
                        <a th:href="@{'/article/'+${articleList.id}}"  class="read-more">Read more</a>
                    </div>
                </div>
                <!-- Blog 1 end -->

                <!-- Page navigation start -->
                <div class="pagination-box hidden-mb-45 text-center">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item" ><a th:href="@{'/article?pageNum='+${currPage-1}}">&laquo;</a></li>
                            <li class="page-item" th:each="pageNum:${pages}">
                                <a th:href="@{'/article?pageNum='+${pageNum}}"th:classappend="${pageNum==currPage}?'active'"th:text="${pageNum}">1</a>
                            </li>
                            <li class="page-item"><a th:href="@{'/article?pageNum='+${currPage+1}}">&raquo;</a></li>
                        </ul>

                    </nav>
                </div>
                <!-- Page navigation end -->
            </div>
            <div class="col-lg-4 col-md-12">
                <div class="sidebar-right">
                    <!-- Posts By Category Start -->
                    <div class="posts-by-category widget">
                        <h3 class="sidebar-title">Tags</h3>
                        <div class="s-border"></div>
                        <ul class="list-unstyled list-cat" >
                            <li th:each="tagList:${tagList}">
                                <a th:href="@{'/checkTag/'+${tagList.id}}" >
                                    <em th:text="${tagList.tag}">Single Family</em>
                                    <span>)</span>
                                     <span th:text="${tagList.tagnum}"></span>
                                    <span>(</span>
<!--                                        <span th:text="${tagList.tagnum}">45</span>-->

                                </a>
                            </li>

                        </ul>
                    </div>
                    <!-- Social links Start -->
<!--                    <div class="widget social-links">-->
<!--                        <h3 class="sidebar-title">明星用户</h3>-->
<!--                        <div class="s-border"></div>-->
<!--                        <ul class="social-list clearfix">-->
<!--                            <li><a href="#" class="facebook-bg"><i class="fa fa-facebook"></i></a></li>-->
<!--                            <li><a href="#" class="twitter-bg"><i class="fa fa-twitter"></i></a></li>-->
<!--                            <li><a href="#" class="google-bg"><i class="fa fa-google-plus"></i></a></li>-->
<!--                            <li><a href="#" class="linkedin-bg"><i class="fa fa-linkedin"></i></a></li>-->
<!--                            <li><a href="#" class="pinterest-bg"><i class="fa fa-pinterest"></i></a></li>-->
<!--                        </ul>-->
<!--                    </div>-->

                </div>
            </div>
        </div>
    </div>
</div>
<!-- Blog body end -->

<!--footer-->
<footer th:replace="Currency/indexnav::indexfooter"></footer>
<!--footer-->

<!--State GoToTop-->
<div th:replace="Currency/indexnav::GoToTop"></div>
<!--End GoToTop-->
</body>
</html>